<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="static/css/semantic.min.css">


		<script src="static/js/vue.js"></script>
    <!-- 引入样式 -->
		<link rel="stylesheet" href="static/element-ui/lib-master/theme-chalk/index.css">
<!-- 引入组件库 -->
		<script src="static/element-ui/lib-master/index.js">
  
</script>
	</head>
	<body>
	


	




		<div class="fillcontain" id="app">
	<template>
		<!-- <el-alert
		title="商品管理页面"
		type="success"
		
	
		show-icon>
	  </el-alert>
	 -->

		</template><h2 class="ui teal header" style="text-align: center;margin-top: 10px;">欢迎来到商品管理页面</h2>
			<el-form
			  :model="dataForm"
			  class="search_container"
			  label-width="100px"

			  @keyup.enter.native="submit(1)"
			>
			  <el-row>		
				<el-col :span="5">
				  <el-form-item label="农产品类别">
					<el-select filterable  style="width: 220px;"
					  v-model="dataForm.categoryName"
					  default-first-option
					  filterable
					  allow-create
					  clearable
					  size="small"
					  placeholder="选择商品一级分类"
					 	@change="changeSubCategory"
						 @visible-change="flag"
						
					>
					  <el-option
						v-for="(item,index) in this.parentCategoryList"
						:key="index"
						:label="item.label"
						:value="item.value"
					
					  />
					</el-select>
					
				  </el-form-item>

				
				
				
				</el-col>

				<el-col :span="5">
					<el-form-item label="二级">
						<el-select style="width: 150px;"
						filterable
						allow-create
						@change="change"
						placeholder="二级分类"
						clearable size="small"   v-model="dataForm.categoryName1">
							<el-option
							v-for="(item,index) in this.subOptions"
							:key="index"
							:label="item.label"
							:value="item.value"
							
						
							>
							</el-option>
	
	
	
	
						</el-select>
					</el-form-item>

				</el-col>
		 
				<el-col :span="7">
				  <el-form-item label="商品名称" label-width="120px">
					<el-input
					  v-model="dataForm.product_name"
					  placeholder="输入商品名称"
					  clearable
					  size="small"
					></el-input>
				  </el-form-item>
				</el-col>

				
				<el-col :span="7">
					<el-form-item label="商品状态">
					  <el-select
						v-model="dataForm.isup"
						clearable
						size="small"
					  >
					<el-option label="上架"value="1"> </el-option>
					<el-option label="下架"value="0"> </el-option>
					
					
					</el-select>
					</el-form-item>
				  </el-col>
		
		
		
				<el-col :span="18">
				  <el-form-item label="商品上架日期">
					<el-date-picker
					v-model="dataForm.submistrdte"
					type="date"
					placeholder="开始日期"
					value-format="yyyy-MM-dd"
					clearable
					size="small"
				  >
				  </el-date-picker>
				  <span class="spanline">&nbsp;-&nbsp;</span>
				  <el-date-picker
					v-model="dataForm.submienddte"
					type="date"
					placeholder="结束日期"
					value-format="yyyy-MM-dd"
					@blur='dataBlur'
					clearable
					size="small"
				  >
					</el-date-picker>
				  </el-form-item>
				</el-col>
			
				
				<el-col :span="6" class="text_center">
				  <el-button type="primary" icon="el-icon-search" @click="intDataList(1)" size="small" ></el-button>
				  <el-button icon="el-icon-refresh" @click="resetForm" size="small"></el-button>
				  
				  <el-button type="success" size="small" @click="addHandle">新增商品</el-button>
				</el-col>
			  </el-row>
			</el-form>


			
		
			<!-- 查询结果列表 -->
			<div class="listbox">
			
			  <!-- 列表 -->
			  <el-table ref="multipleTable" 
			  :data="dataList" border :fit="true" 
			  style="width: 100%" disabled>
				<el-table-column sortable type="index" label="序号" header-align="center" width="45" ></el-table-column>
				<el-table-column v-if="false" sortable prop="product_id" label="商品id" show-overflow-tooltip min-width="100" disabled>
					<template slot-scope="scope"> 
						  
  
					  
					  <span > {{ scope.row.product_id || '--' }} </span> 
					  </template>
				  </el-table-column>
		  
		
				<el-table-column sortable prop="product_name" label="商品名称" show-overflow-tooltip min-width="100" disabled>
				  <template slot-scope="scope"> 
						

					
					<span > {{ scope.row.product_name || '--' }} </span> 
					</template>
				</el-table-column>
				
				<el-table-column sortable prop="sku_name" label="商品套餐名" show-overflow-tooltip min-width="80" disabled>
					<template slot-scope="scope"> 
						  
  
					  
					  <span > {{ scope.row.sku_name || '--' }} </span> 
					  </template>
				  </el-table-column>
				  
				<el-table-column sortable prop="untitled" label="商品套餐" show-overflow-tooltip min-width="180" disabled>
					<template slot-scope="scope"> 
						  
  
					  
					  <span > {{ scope.row.untitled || '--' }} </span> 
					  </template>
				  </el-table-column>

				
				<el-table-column sortable prop="product_name" label="商品图片地址" show-overflow-tooltip min-width="100" disabled>
					<template slot-scope="scope"> 
						<img width="66px" height="25px" :src="'static/pimg/'+scope.row.url" style="border-radius: 5px;" >
					  </template>
				  </el-table-column>
		
				<el-table-column sortable prop="category_name" label="商品分类名称" show-overflow-tooltip min-width="100" >
				  <template slot-scope="scope"> {{ scope.row.category_name || '--' }} </template>
				</el-table-column>
				<el-table-column prop="isup" label="商品的状态" show-overflow-tooltip min-width="90" sortable>
					<template slot-scope="scope"> 
						<span v-if="scope.row.isup==1" style="color:teal">上架</span>
						<span v-if="scope.row.isup==0" style="color:red">下架</span>
						
						 </template>
				  </el-table-column>
		
				<el-table-column prop="sold_num" label="销售数量" show-overflow-tooltip min-width="100" sortable>
				  <template slot-scope="scope"> {{ scope.row.sold_num || '--' }} </template>
				</el-table-column>
				<el-table-column prop="content" label="商品说明" show-overflow-tooltip min-width="110" sortable>
				  <template slot-scope="scope">
				
					  
					<span >{{ scope.row.content || '--' }}</span>
					
					 </template>
				</el-table-column>
		
		
				<el-table-column prop="create_time" label="商品创建时间" show-overflow-tooltip min-width="100" sortable>
				  <template slot-scope="scope"> {{ scope.row.create_time || '--' }} </template>
				</el-table-column>
		
			
				<el-table-column  prop="update_time" label="商品更新时间" show-overflow-tooltip min-width="100" sortable>
				  <template slot-scope="scope"> {{ scope.row.update_time || '--' }} </template>
				</el-table-column>
		
			
				<el-table-column label="操作" show-overflow-tooltip min-width="180" fixed="right">
				
					
					<template slot-scope="scope">
						<el-button
						 
						  type="text"
						  size="small"
						  @click="copyHandle(scope.row)"
						  >复制</el-button
						>
						<el-button
						
						  type="text"
						  size="small"
						  @click="UpdateHandle(scope.row)"
						  >修改</el-button
						>
						<!-- <el-button
						  type="text"
						  size="small"
						  @click="saveHandle(scope.row, scope.$index, scope.row.id)"
						  v-if="!scope.row.disabled"
						  >保存</el-button
						> -->
						<el-button
						  type="text"
						  size="small"
						  @click="deleteHandle(scope.row, scope.$index)"
						  >删除</el-button
						>
					  </template>
		
		
				
				
				</el-table-column>  <el-button type="danger"> 新增</el-button>
			  </el-table>

 <!-- 分页 -->
 <el-row>
	<el-col :span="24">
	  <div class="pagination">
		<!-- 分页 -->
		<el-pagination
		  background
		  @size-change="sizeChangeHandle"
		  @current-change="currentChangeHandle"
		  :current-page="page.pageIndex"
		  :page-sizes="[10, 20, 50, 100]"
		  :page-size="page.pageSize"
		  :total="page.totalPage"
		  layout="total, sizes, prev, pager, next, jumper"
		>
		</el-pagination>
	  </div>
	</el-col>
  </el-row>	


			</div>
			<br><br><br><br><br>

			
<el-dialog title="商品信息修改" :visible.sync="dialogFormVisible">
	<el-form :model="form">
	  <el-form-item label="商品名称" :label-width="formLabelWidth">
		<el-input v-model="form.product_name" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="商品套餐名" :label-width="formLabelWidth">
		<el-input v-model="form.sku_name" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="商品套餐" :label-width="formLabelWidth">
		<el-input v-model="form.untitled" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="商品图片" :label-width="formLabelWidth">
		<el-input type="file" v-model="form.imgurl" autocomplete="off"></el-input>
	  </el-form-item>

	  <el-form-item label="商品分类名称" >
	
					<el-select filterable  
					  v-model="form.category_id"
					  default-first-option
					  filterable
					  allow-create
					  clearable
					  size="small"
					  placeholder=""
					 	@change="changeSubCategory"
						 @visible-change="flag"
						
					>
					  <el-option
						v-for="(item,index) in this.parentCategoryList"
						:key="index"
						:label="item.label"
						:value="item.value"
					
					  />
					</el-select>
	  </el-form-item>


<!--  -->
<el-form-item label="商品的状态" :label-width="formLabelWidth">
	<el-select v-model="form.isup" autocomplete="off">
		<el-option label="上架" value="1" style="color: teal;" checked></el-option>
		<el-option label="下架" value="0" style="color: red;"></el-option>

	</el-select>
  </el-form-item>
  <el-form-item label="商品说明" :label-width="formLabelWidth">
	<el-input
	type="textarea"
  :rows="2"
  placeholder="请输入内容"
	v-model="form.content" autocomplete="off"></el-input>
  </el-form-item>



	</el-form>
	<div slot="footer" class="dialog-footer">
	  <el-button @click="dialogFormVisible = false">取 消</el-button>
	  <el-button type="primary" @click="updateProduct(form)" :disabled="confirm">确 定</el-button>
	</div>
  </el-dialog>

<!-- 商品信息的保存 -->
	

  <el-dialog title="商品添加" :visible.sync="dialogFormVisibleSave">
<el-steps :space="800" :active="active" finish-status="success">
		<el-step title="步骤 1">




		</el-step>
		<el-step title="步骤 2"></el-step>

	</el-steps>

	<el-form :label-position="labelPosition" :model="form" v-show="show">
		<h2>商品信息添加 </h2>
	  <el-form-item label="商品名称" :label-width="formLabelWidth">
		<el-input v-model="form.product_name" autocomplete="off"></el-input>
	  </el-form-item>

	  <el-form-item label="商品图片" :label-width="formLabelWidth">
		<el-input type="file" v-model="form.img_name" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="商品分类名称" :label-width="formLabelWidth">
<!-- 
		<el-cascader
		:props="defaultParams"
	
		:options="this.parentCategoryList"
		v-model="subOptions1"
		@change="changeSubCategory">
	  </el-cascader> -->


		<el-select
		clearable
		 v-model="form.category_id"  
		 placeholder="请选择活动区域" >


			<el-option
			v-for="item in this.parentCategoryList"
			:key="item.value"
			:label="item.label"
			:value="item.value">
		  </el-option>
		 
		</el-select> 
	  </el-form-item>


<!--  -->
<el-form-item label="商品的状态" :label-width="formLabelWidth">
	<el-select v-model="form.isup" autocomplete="off">
		<el-option label="上架" value="1" style="color: teal;" checked></el-option>
		<el-option label="下架" value="0" style="color: red;"></el-option>

	</el-select>
  </el-form-item>
  <el-form-item label="商品说明" :label-width="formLabelWidth">
	<el-input
	type="textarea"
  :rows="2"
  placeholder="请输入内容"
	v-model="form.content" autocomplete="off"></el-input>
  </el-form-item>



	</el-form>

  <el-form :label-position="labelPosition" :model="form" v-show="!show">
   <h2>商品属性信息添加 </h2>
	<el-form-item label="商品套餐名称" >
		<el-input v-model="form.sku_name" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="商品口味" >
<!-- 
		<el-cascader
		:props="defaultParams"
	
		:options="this.parentCategoryList"
		v-model="subOptions1"
		@change="changeSubCategory">
	  </el-cascader> -->


		<!-- <el-select
		clearable
		 v-model="form.category_id"  
		 placeholder="请选择活动区域" >


			<el-option
			v-for="item in this.parentCategoryList"
			:key="item.value"
			:label="item.label"
			:value="item.value">
		  </el-option>
		 
		</el-select>  -->

<!-- 
		
		<el-radio-group v-model="product1.radio">
			<el-radio :label="1">原味</el-radio>
			<el-radio :label="2">夏天</el-radio>
			<el-radio :label="3">秋天</el-radio>
			<el-radio :label="4">冬天</el-radio>
		</el-radio-group> -->

		<el-input v-model="form.untitled">

		</el-input>

	  </el-form-item>
	  <el-form-item label="商品原价">
		  <el-input v-model="form.originPrice"></el-input>

	  </el-form-item>
	  <el-form-item label="商品售价">
		<el-input v-model="form.sellPrice"></el-input>

	</el-form-item>

	<el-form-item label="商品库存">
		<el-input type="number" v-model.number="form.stock">
			<template slot="append">件</template>
		</el-input>

	</el-form-item>
	<el-row>
		<el-col :span="18">

		</el-col>
		<el-col :span="12">
	<el-form-item style="float: right;">

	
	  <el-button @click="dialogFormVisibleSave = false">取 消</el-button>
	  <el-button type="primary" @click="saveProduct(form)">保存</el-button>




	</el-form-item>



		</el-col>




	</el-row>

  </el-form>




	
	<div slot="footer" class="dialog-footer">
		<el-button style="margin-top: 12px;" @click="pre">上一步</el-button>
		<el-button style="margin-top: 12px;" @click="next">下一步</el-button>

	</div>
  </el-dialog>







			</div>

	</div>




<script src="static/js/jquery.min.js"> </script>
<script src="static/js/base.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/cookie_utils.js"></script>

<script>

var userId=getCookieValue("userId");
var token=getCookieValue("token");
	new Vue({
      el:'#app',
	  data:{
		labelPosition:'right',
		active:0,
		illcodeInputShow:true,
		show:true,
		
		formLabelWidth: '120px',
		dialogFormVisible:false,
		dialogFormVisibleSave:false,
		dataForm:{
			submienddte:"",
			submistrdte:"",
			isup:"",
		
			product_name:"",
			categoryName:"",
			categoryName1:"",
			

		},
		dataList:[{},{}],
		// 分类数据
		categorydataList:[],
		parentCategoryList:[],
		subOptions1:[],
		subOptions:[],
		flag:false,
		defaultParams:{
			value:'value',
			label:'label',
			// children:this.subOptions

		},
		parenId:"",
		sbusiorgMap:[{
			sorgname:'1',


		}],
		category_id:0,
		submistrdte:"",
		submienddte:"",
		disabled:true,
		page: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      },
		form:{

		},
		 // 公共数据
		 commonData: {
       
      },
	  confirm:false,
//  商品分类查询的id
	  selectCategory_id1:0,
	  selectCategory_id2:0,

	  },


	  methods:{
		change(val){
			console.log(val,"Category2")


		},

		next() {this.show = false;
        if (this.active++ > 2) this.active = 0;
      
      },
            pre() {this.show = true;
            if (this.active-- < 0) this.active = 0;
      
      },
		flag(val){
			this.flag = val;
			console.log(val,"flag");

		},
		changeSubCategory(val){
			// let label=this.$refs['cascaderAddr'].currentLabels;
			// console.log(label);
		

			this.dataForm.categoryName1 = null;
			

		
	

			axios({
				url:baseUrl+"index/subList",
				method:"post",
				headers:{
					token:token
				},
				data:val,

			}).then(res=>{
				this.subOptions = res.data.data;
				console.log(this.subOptions);
				console.log(res.data,"parent")
				// ELEMENT.Message.success("更新商品信息成功");
			})


		},
		  queryParenList(){
			axios({
				url:baseUrl+"index/parentlist",
				method:"post",
				headers:{
					token:token
				},
				data:userId,

			}).then(res=>{
				this.parentCategoryList = res.data.data;
				console.log(res.data,"parent")
				// ELEMENT.Message.success("更新商品信息成功");
			})
			


		  },

		
		saveProduct(val){
			if(val.product_name==null || val.product_name.length == 0){
				ELEMENT.Message.success("商品名称不可以为空");
				return;
			}
			if(val.category_id==null || val.category_id.length == 0){
				ELEMENT.Message.success("商品分类名称必须选择");
				return;
			}
			if(val.originPrice.trim()==null){
				ELEMENT.Message.success("商品原价不可以为空");
				return;
			}
			if(val.category_id==null || val.category_id.length == 0){
				ELEMENT.Message.success("商品分类名称必须选择");
				return;
			}
			console.log(val,"product");
			axios({
				url:baseUrl+"product/add",
				method:"post",
				data:val,

			}).then(res=>{
				console.log(res.data.msg);
				ELEMENT.Message.success(res.data.msg);
			})
			



		},
		showCategorires(){
                    var url2=baseUrl+"index/categorylist";
axios.post(url2).then(res=>{
  
  this.categorydataList=res.data.data; 
  console.log(this.categorydataList,"----------CategoriesdataList")

  this.categories.forEach(element => {
  
      
  });

  
})
                },

				onchange(val){
					console.log(val,"val-------------");

				},

		// 商品保存
		updateProduct(row){

			axios({
				url:baseUrl+"product/update",
				method:"post",
				data:row,

			}).then(res=>{
				ELEMENT.Message.success("更新商品信息成功");
			})
			
			
		},
		   // 删除
		   deleteHandle(row, index) {
      
		
      let params = {
        product_id:row.product_id,
		sku_id: row.sku_id,
      };
      this.$confirm(`确定进行删除操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {

      axios({
		url:baseUrl+"product/delete",
		method:'post',
		data:params

	  }).then((res) => {
		  console.log(res.data);

		ELEMENT.Message.success(res.data.msg);
		this.intDataList();
        
        });
      });
    },
		  
    // // 公共代码段-复制、修改
    // commenFn(row) {
    //   let copyObj = {
    //   product_name:row.product_name, 
    //     category_name: row.category_name, 
	// 	content:row.content,
	// 	isup:row.isup,
	// 	soldNum:0,
		
    //   };
    //   this.commonData = copyObj;
    //   this.dataList.push(this.commonData);
    //   this.commonData = {};
    // },

		    // 复制
			copyHandle(row) {
      // 功能代码
    //   this.commenFn(row);

	this.dialogFormVisibleSave = true;
	this.form=row;
	  this.illcodeInputShow=false;
	  ELEMENT.Message.success('复制成功');
    },
	addHandle(row) {
      // 功能代码
    //   this.commenFn(row);

	this.dialogFormVisibleSave = true;
	
	
	  ELEMENT.Message.success('新增成功');
    },

    // 修改功能
    UpdateHandle(row) {
      // 功能代码
	  this.category_id=row.category_id;
      row.disabled = false;
	  this.confirm=false;
	  this.form=row;
	  
      this.dialogFormVisible = true;
    },

   
		dataBlur(){
		if(this.dataForm.submistrdte>this.dataForm.submienddte){
			this.dataForm.submienddte = "";

			ELEMENT.Message.success(
				'开始日期不可以大于结束日期');
		}


		},
 // 每页数
 sizeChangeHandle(val) {
      this.page.pageSize = val;
      this.page.pageIndex = 1;
      this.intDataList(2);
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.pageIndex = val;
      this.intDataList(2);
    },

    //  前往末页
    toLastPage() {
      let max = Math.ceil(this.tablePage.totalResult / this.tablePage.pageSize);
      this.handleCurrentChange(max);
    },
		// 重置
		resetForm(){
			this.dataForm.category_id="",
			this.dataForm.product_name="",
			this.dataForm.submistrdte="",
			this.dataForm.submienddte="",
			this.dataForm.categoryName="",
			this.dataForm.categoryName1 = "",
			this.dataForm.isup="",
			this.intDataList(1);
			
		},



    // 支持enter键查询
    submit(val){
      // console.log(this.dataForm.branchname );
      this.intDataList(val);
    },

	  // 点击搜索按钮，请求数据
	  intDataList(val) {
      // this.$store.dispatch("loading/CHANGE_LOADING", true);
        let userId=getCookieValue("userId");
	  var params={
		pageNum: this.page.pageIndex,
        pageSize: this.page.pageSize,	
		category_id: this.dataForm.categoryName,
          product_name:this.dataForm.product_name,
          createTime: this.dataForm.submistrdte,
          createTime1: this.dataForm.submienddte,
		  isup:this.dataForm.isup,
		 
		  
		  userId:userId
	  }
      if (val === 1) {
		
        
        //起始日期为空，截止日期赋值起始日期
        if(this.submistrdte == ''){
          this.submistrdte =  this.submienddte
        }
        //截止日期为空，起始日期赋值截止日期
        if(this.submienddte == ''){
          this.submienddte =  this.submistrdte
        }
// 666
    
        sessionStorage.setItem("datumTasks",JSON.stringify(params))
      }
	  let token=getCookieValue("token");
	
	  var url5=baseUrl+"product/list";
						
						axios({
								url:url5,
								method:"post",
								headers:{
									token:token
								},
								data:params
							}).then( res=>{

     
      
          this.dataList = [];
            console.log(res.data,"dataList-------------");
			this.dataList=res.data.list;
			// this.page.pageNum=1
			
			this.page.totalPage=res.data.total;
			this.pageIndex=res.data.pageNum;
         
      
          
            
              
             
         
        }).catch((err) => {
 
        
        }); 
    },
	  },
	  created(){
  this.intDataList();
  this.showCategorires();
  this.queryParenList();
 
	  }

	})
</script>


	</body>
</html>
